<!-- 新增和编辑弹窗 -->
<template>
  <a-modal
    :width="800"
    :visible="visible"
    title="详情"
    :body-style="{ paddingBottom: '8px' }"
    @update:visible="updateVisible"
    :footer="null"
  >
    <a-descriptions bordered :column="2" size="default">
      <a-descriptions-item label="呼吸速率(次/min)">{{ form.respirationRate }}</a-descriptions-item>
      <a-descriptions-item label="心跳速率(次/min)">{{ form.heartRate }}</a-descriptions-item>
      <a-descriptions-item v-if="form.maxtTemp" label="最大温度的前三个值">{{ form.maxtTemp }}</a-descriptions-item>
    </a-descriptions>
    <a-image v-if="form.thermalImagingUrl"
             :width="200"
             :src="form.thermalImagingUrl"
    />
  </a-modal>
</template>

<script>
import { reactive, toRefs, watchEffect } from 'vue';

export default {
  name: 'CattleManagerCattlehealthdataHeartbeatDataDetail',
  emits: ['update:visible'],
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 详情数据
    data: Object
  },
  setup(props, context) {
    const data = reactive({
      form: {}
    });

    const watch = watchEffect(() => {
      if (props.data) {
        data.form = Object.assign({}, props.data);
        if (props.data.maxTemperature != undefined && props.data.maxTemperature != null && props.data.maxTemperature != '') {
          let jsonArr = JSON.parse(props.data.maxTemperature);
          if (jsonArr != null && jsonArr.length > 0) {
            let myValues = [];
            jsonArr.forEach(function(item,index) {
              myValues.push(item);
            });
            data.form.maxtTemp = myValues.join(',');
          }
        }
      }
    });

    const updateVisible = value => {
      context.emit('update:visible', value);
    };

    return {
      ...toRefs(data),
      watch,
      updateVisible
    };
  }
};
</script>

<style scoped></style>
